<html>
<head>
    <title>jQuery Measure Demo</title>
    <style>
body { font-size: 11pt; }
#top { font-size: 1.2em; }
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
#main { height: 22em }
#main, input, select, button { font-size: 12px; }
.select {
    color: #666;
    font-style: italic;
    float: right;
    font-size: 10pt;
}
#red {
    width: 90;
    height: 70;
    background: red;
    padding: 15px;
}
#yellow {
    width: 200;
    height: 200;
    background: yellow;
    margin: 10px
}
    </style>
    <script type="text/javascript" src="../../jquery.1.4.2.js"></script>
    <script type="text/javascript" src="jquery.measure.js"></script>
    <script type="text/javascript">
$(function() {
    function log(el, box) {
        console.log('top:'+box.top, 'left:'+box.left,
                    'height:'+box.height, 'width:'+box.width,
                    'for:', el, 'returned:', box);
    }
    $(window).load(function() {
        log(document.body, $.measure());
    });
    $('*').click(function() {
        log(this, $(this).measure());
        return false;
    });
});
    </script>
</head>
<body>
<div id="top" class="box">
    <span class="select">#top.box</span>
    Click elements and view console log to see measurements.
</div>
<br clear="all">
<div id="main" class="box">
    <span class="select">#main.box</span>
    <label for="select"></label>
    $('<select name="select" title="The empty option calls $.place() instead.">
        <option></option>
        <option>#red</option>
        <option>#yellow</option>
        <option>#main</option>
        <option>#top</option>
        <option>.box</option>
        <option>.fill</option>
        <option>div</option>
    </select>').place({
    <label for="align">align:</label>
    '<select name="align">
        <option></option>
        <option>top-left</option>
        <option>top-center</option>
        <option>top-right</option>
        <option>center-left</option>
        <option>center</option>
        <option>center-right</option>
        <option>bottom-left</option>
        <option>bottom-center</option>
        <option>bottom-right</option>
    </select>',
    <label for="select">text:</label>
    '<input type="text" name="text" value="" size="10">' [,
    <label for="img">img: 'place.gif'</label>
    <input type="checkbox" name="img" value="wide.gif">] [,
    <label for="element">element:</label>
    <select name="element">
        <option></option>
        <option>#red</option>
        <option>#yellow</option>
        <option>#top</option>
        <option>#toggle</option>
        <option>:text</option>
    </select>] })
    <button id="toggle">Toggle</button>
    <div id="yellow" class="fill">
        <span class="select">#yellow.fill</span>
        <div id="red" class="fill">
            <span class="select">#red.fill</span>
        </div>
    </div>
</div>
</body>
</html>